<template>
  <PageContainer :transparent="false">
    <Header :title="pageTitle">
      <CustomTopTips
        :text="`详细阐述供需的具体内容，如产品规格、服务要求、数量、交付时间、期望价格范围等，允许添加相关图片、视频等。`"
      ></CustomTopTips>
    </Header>

    <view class="p-12">
      <PageComponents ref="pageComponentsRef" @loading-complete="loadingComplete"></PageComponents>
    </view>

    <TButtonGroup
      :styles="{
        backgroundColor: '#fff',
        display: 'block',
      }"
    >
      <TButton
        text="编辑完成"
        type="none"
        :customStyle="{
          backgroundColor: '#2878FF',
          color: '#FFFFFF',
        }"
        custom-class="h-44 linh-44 br-22"
        @click="handleBackPage"
      />
    </TButtonGroup>
  </PageContainer>
</template>

<script lang="ts" setup>
  import Header from '@/components/Header/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import { navigateBack, onLoad } from '@/router';
  import { ref, watch } from 'vue';
  import type { FunctionArgs } from '@vueuse/core';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import PageComponents from './components/PageComponents.vue';
  import { BoTypeEnum } from '@/enums/businessOpportunitiesEnum';
  import type { EditBusinessOpportunitiesDetail } from '@/router/types/modules/businessOpportunities';
  import CustomTopTips from '@/components/CustomTopTips/index.vue';

  const pageComponentsRef = ref<InstanceType<typeof PageComponents>>();

  const pageTitle = ref('详情');

  const pageParams = ref<EditBusinessOpportunitiesDetail>();
  onLoad<'editBusinessOpportunitiesDetail'>((op) => {
    pageParams.value = op;
    if (op.boType) {
      pageTitle.value = op.boType === BoTypeEnum.Supply ? '供应详情' : '需求详情';
    }
  });

  const loadingComplete = () => {
    if (pageParams.value) {
      pageComponentsRef.value?.setData(pageParams.value);
    }
  };
  const handleBackPage = () => {
    pageParams.value?.successFn?.(pageComponentsRef.value?.getData());
    navigateBack(1);
  };
</script>

<style lang="scss" scoped></style>
